<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<link href="css/imgareaselect-default.css" rel="stylesheet">
<script type="text/javascript" src="../jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery.imgareaselect.js"></script>


<script type="text/javascript">
	function preview(img, selection) {
		var scaleX = 100 / (selection.width || 1);
		var scaleY = 100 / (selection.height || 1);

		$('#testid').css({
			width : Math.round(scaleX * 400) + 'px',
			height : Math.round(scaleY * 300) + 'px',
			marginLeft : '-' + Math.round(scaleX * selection.x1) + 'px',
			marginTop : '-' + Math.round(scaleY * selection.y1) + 'px'
		});
	}

	$(document)
			.ready(
					function() {
						$(
								'<div><img id="testid" src="img/ferret.jpg" style="position: relative;" /><div>')
								.css({
									float : 'left',
									position : 'relative',
									overflow : 'hidden',
									width : '100px',
									height : '100px'
								}).insertAfter($('#ferret'));

						$('#ferret').imgAreaSelect({
							aspectRatio : '1:1',
							onSelectChange : preview,
							onSelectEnd : function(img, selection) {
								$('input[name="x1"]').val(selection.x1);
								$('input[name="y1"]').val(selection.y1);
								$('input[name="x2"]').val(selection.x2);
								$('input[name="y2"]').val(selection.y2);
							}
						});
						
						//提交的四个值
						$('#btn_sub').click(function (){
							alert('x1:'+$('input[name="x1"]').val());
							alert('y1:'+$('input[name="y1"]').val());
							alert('x2:'+$('input[name="x2"]').val());
							alert('y2:'+$('input[name="y2"]').val());
						});
					});
	
	
	
	
</script>
</head>


<body>

	<div>
		<p>
			<img id="ferret" src="img/ferret.jpg"
				style="float: left; margin-right: 10px;" />
		</p>

		<form action="" method="post">
		  <input type="hidden" name="x1" value="" />
		  <input type="hidden" name="y1" value="" />
		  <input type="hidden" name="x2" value="" />
		  <input type="hidden" name="y2" value="" />
		  <input type="button" id="btn_sub" name="submit" value="Submit" />
		</form>
	</div>


</body>


</html>